<template>
  <div>
    <Table
      class="custom-ivu-table"
      :loading="loading"
      :no-data-text="loading ? '' : '暂无数据'"
      :height="height"
      :columns="columns"
      :data="tableData"
      :border="border"
      @on-selection-change="handleTableSelect"
      @on-sort-change="handleTableSort"
    ></Table>

    <div v-if="!hidePage" class="pagination-container d-flex flex-ju-c f14">
      <Page
        :total="total"
        :current="internalCurrent"
        show-total
        show-elevator
        :show-sizer="showSizer"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      ></Page>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonTablePage',

  props: {
    loading: { default: false },
    height: { type: [String, Number], default: '560' },
    columns: { type: Array, required: true },
    tableData: { type: Array, required: true },
    border: { type: Boolean, default: false },
    hidePage: { type: Boolean, default: false },
    showSizer: { type: Boolean, default: true },
    total: { type: Number, default: 0 },
    current: { type: Number, default: 1 },
    pageSize: {
      type: Number,
      default() {
        return this.commonPagination.size
      },
    },
    pageSizeOpts: {
      type: Array,
      default() {
        return this.commonPagination.sizes
      },
    },
  },

  data() {
    return {
      internalCurrent: 1,
    }
  },

  watch: {
    current(v) {
      this.internalCurrent = v
    },
  },

  methods: {
    handleTableSelect(selection) {
      this.$emit('on-selection-change', selection)
    },
    handleTableSort(data) {
      this.$emit('on-sort-change', data)
    },
    handlePageChange(page) {
      this.$emit('on-change', page)
    },
    handlePageSizeChange(pageSize) {
      this.$emit('on-page-size-change', pageSize)
    },
  },
}
</script>

<style lang="less" scoped></style>
